<!-- ******供气量****** -->
<template>
  <div class="first-hgcpkc">
    <div class="title-box">
      <div class="title">
        <img src="../../../../assets/img/gongqifa.png" alt="" />
        供气量
      </div>
      <div class="title-one">
        <div class="title-one1">
          高压：
          <span class="title-Span">300.00</span>
          <span class="title-SpanT">t</span>
        </div>
        <div class="title-one1">
          中压：
          <span class="title-Span">300.00</span>
          <span class="title-SpanT">t</span>
        </div>
        <div class="title-one1">
          低压：
          <span class="title-Span">300.00</span>
          <span class="title-SpanT">t</span>
        </div>
      </div>
      <div class="title-two">
        <div class="title-two1" id="supplyEcharts"></div>
      </div>
      <div class="title-three">
        <p>重点指标分析</p>
        <div class="title-three1" id="supplyEcharts1"></div>
      </div>
    </div>
  </div>
</template>
<script>
import "echarts-liquidfill";
import * as echarts from "echarts";
import eventBus from '@/EventBus';

export default {
  name: "first-hgcpkc",
  created() {
    eventBus.$on('send', (data1, data2) => {
      this.supplyEcharts(data1)
      this.supplyEcharts1(data2)
    })
  },
  mounted() {
    this.supplyEcharts();
    this.supplyEcharts1();
    window.addEventListener('resize',()=>{
     this.supplyEcharts();
    this.supplyEcharts1();
    })
  },
  methods: {
    supplyEcharts(data1) {
      
      let supplyEcharts = this.$echarts.init(
        document.getElementById("supplyEcharts")
      );
      window.addEventListener("resize", function () {
        supplyEcharts.resize();
      });

  function fontSize(res){
    	let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 19200);
        return res*fontSize;
	}

     const handred = 100;
      let point = 83;
      supplyEcharts.setOption({
        title: { 
          text: data1 || point + "%",
             
          // subtext: "综合热效率",
          // subtextStyle: {
          //   color: "#575e67",
          //   // fontSize: 50,
          //    fontSize: fontSize(5),
          // },
          itemGap: -190,
          left: "center",
          top: "50%",
          textStyle: {
            fontWeight: "normal",
            color: "#ccc",
              // fontSize: 117,
               fontSize: fontSize(11.7),
          },
        },

        series: [
          {
            name: "circle",
            type: "pie",
            clockWise: true,
            radius: ["70%", "90%"],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            data: [
              {
                        label: {
                normal: {
                
                    formatter: function(){
                        return "综合热效率\n\n";
                    },
                    position: 'center',
                    show: true,
                    textStyle: {
                        fontSize: fontSize(5),
                        fontWeight: 'normal',
                        color: '#fff'
                    }
                }
            },
                value: data1 || point,

                itemStyle: {
                  normal: {
                    color: {
                      // 颜色渐变
                      colorStops: [
                        {
                          offset: 0,
                          color: "#52212b", // 0% 处的颜色
                        },

                        {
                          offset: 1,
                          color: "#e44f28", // 100% 处的颜色1
                        },
                      ],
                    },
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                value: handred - data1 || point,
                itemStyle: {
                  normal: {
                    color: "#575e67",
                  },
                },
              },
            ],
          },
        ],
      });
    },
    supplyEcharts1(data2) {
      function fontSize(res){
    	let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 19200);
        return res*fontSize;
	}
      let charts = {
        unit: "重点指标分析",
        names: ["高压", "中压", "底压"],
        lineX: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        value: data2 || [
          [45, 35, 30, 53, 95, 26, 27, 38, 19, 11, 21, 12],
          [36, 55, 80, 12, 30, 50, 12, 80, 20, 43, 32, 28],
          [20, 35, 10, 92, 40, 40, 12, 10, 30, 23, 52, 28],
        ],
      };
      let color = ["rgba(40, 69, 47", "rgba(116,104,45", "rgba(54,112,98"];
      let lineY = [];
          window.addEventListener("resize", function () {
        supplyEcharts1.resize();
      });
      for (let i = 0; i < charts.names.length; i++) {
        let x = i;
        if (x > color.length - 1) {
          x = color.length - 1;
        }
        let data = {
          name: charts.names[i],
          type: "line",
          color: color[x] + ")",
          smooth: true,
          lineStyle: {
            normal: {
              width: 2,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: color[x] + ", 0.7)",
                  },
                  {
                    offset: 0.8,
                    color: color[x] + ", 0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.7)",
              shadowBlur: 20,
            },
          },
          symbol: "circle",
          symbolSize: 3,
          data: charts.value[i],
        };
        lineY.push(data);
      }

      lineY[0].markLine = {
        silent: true,
      };
      let supplyEcharts1 = this.$echarts.init(
        document.getElementById("supplyEcharts1")
      );

      supplyEcharts1.setOption({
        tooltip: {
          trigger: "axis",
          // padding: 50,
            padding: fontSize(5),
          textStyle: {
            // fontSize:50,
            fontSize:fontSize(5),
          },
        },
        legend: {
          data: charts.names,
          textStyle: {
             fontSize:fontSize(5),
            // fontSize: 50,
            color: "rgb(0,253,255,0.6)",
          },
          left: "14%",
        },
        grid: {
          top: "7%",
          left: "2%",
          right: "4%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: charts.lineX,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          minorTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "rgb(0,253,255,0.6)",
               fontSize:fontSize(3.7),
              // fontSize: 37,
            },
            formatter: function (params) {
              return params.split(" ")[0];
            },
          },
        },
        yAxis: {
          //   name: charts.unit,
          type: "value",
          nameTextStyle: {
             fontSize:fontSize(3.7),
            // fontSize: 37,
            verticalAlign: "bottom",
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          minorTick: {
            show: false,
          },
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "rgb(0,253,255,0.6)",
                fontSize:fontSize(5),
              // fontSize: 50,
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              //   color: "rgb(23,255,243,0.3)",
            },
          },
        },
        series: lineY,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.first-hgcpkc {
  width: 100%;
  height: 3240px;
  //    background-image: url(../../../../assets/img/newBg05.png);
  // background-size: 100% 100%;
  .title-box {
    width: 100%;
    height: 100%;
    .title {
      margin-top: 110px;
      width: 100%;
      padding-left: 65px;
      height: 217px;
      line-height: 217px;
      font-size: 145px;
      background-color: #1a2a44;
      color: #e3f6fa;
      //   letter-spacing: 10px;

      img {
        width: 145px;
      }
    }
    .title-one {
      float: left;
      width: 50%;
      height: 905px;
      font-size: 100px;
      color: #fff;
      text-align: center;
      line-height: 250px;

      .title-one1 {
        color: #6bc960;
        .title-Span {
          color: #ffff5e;
        }
        .title-SpanT {
          color: #fff;
        }
      }
    }
    .title-two {
      width: 50%;
      height: 905px;
      float: right;
      font-size: 100px;
      line-height: 851px;
      text-align: center;
    }
    .title-three {
      float: left;
      width: 100%;
      height: 1823px;

      p {
        font-size: 80px;
        width: 100%;
        height: 100px;
       background-image: -webkit-linear-gradient(
          top,
          #ffffff,
          #bdd0f7,
          #70a1ff
        );

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;
        color: #7faeff;
      }
      .title-three1 {
        width: 100%;
        height: 1723px;
      }
    }
  }
}
#supplyEcharts {
  width: 100%;
  height: 100%;
}
#supplyEcharts1 {
  width: 100%;
  height: 95%;
}
</style>
